Skip to main content

Javascript

Javascript allows you to change the look of the website based on user or other input. An example is dropdown menus.

To use javascript in a website, in html file you can use:

<script type="text/javascript">
  //javascript code
</script>

Variables​

Variables in JS can be defined using var, let, or const. Main types are string, number, and boolean. They are defined like:

var variableName1 = 10; // global scope (even if defined in function)
let variableName2 = 10; // local block scope
const variableName3 = 10; // constants

Further info here.

Useful Functions​

.length​

stringVarName.length; gets you the length of a string.

prompt​

prompt("your text here"); prompts the user for input.

alert​

alert("your text here"); shows user a message of "your text here".

.slice​

StringVarName.slice(start, end); gets a "slice" of a string including the first start number, up to (not including) the second end number.

.toUpperCase​

StringVarName.toUpperCase(); converts the string to upper case.

.toLowerCase​

StringVarName.toLowerCase(); converts the string to lower case.

console.log​

console.log("message to log"); sends a message in parenthesis to the console log (useful for testing and debugging).

Functions​

// take in "bottles" and returns value at the end
function getMilk(bottles) {
  return bottles * 2;
}

getMilk(2); // would return 4

Random Number​

Math.random(); generates a number between 0 and 1. Best way to use is:

Math.floor(x * Math.random()); // generates interger "val" where 0 <= val < x

if​

if (track === "clear") {
  goStraight();
} else {
  turnRight();
}

Checking Equality​

MDN Docs on Equality comparisons and sameness

Array​

var eggs = [egg0, egg1, egg2, egg3, egg4, egg5];
var myEgg = eggs[1]; // egg1

eggs.includes(egg3); // would be true because egg3 exists in array eggs
eggs.push("egg6"); // adds new element "egg6" at the END of the array
eggs.pop(); // returns "egg6", whatever is at the END of the array

map​

Create a new array by doing something with each item in the array.

arrayName.map(someFunction);
// "maps" over each json object in "arrayName"
// and runs function "someFunction" on it.

// Equivalent code is:
for (i = 0; i < arrayName.length; i++) {
  someFunction(arrayName[i]);
}
// OR
arrayName.forEach(function (x) {
  someFunction(x);
});

filter​

Create a new array by keeping the items that return true.

var numbers = [3, 12, 2, 50, 5];
// inside newNumbers only have the numbers from "numbers" that are greater than 10
const newNumbers = numbers.filter(function (num) {
  return num > 10;
});
// newNumbers is now [12, 50];

reduce​

Accumulate a value by doing something to each item in an array.

var numbers = [3, 12, 2, 50, 5];
const newNumber = numbers.reduce(function (accumulator, currentNumber) {
  return accumulator + currentNumber;
});
// newNumber is now  72 (3 + 12 + 2 + 50 + 5 = 72)

find​

Find the first item that matches from an array.

var numbers = [3, 12, 2, 50, 5];
const newNumber = numbers.find(function (num) {
  return num > 10; // returns 12
});
// newNumber = 12

findIndex​

Finds the index of the first item that matches.

var numbers = [3, 12, 2, 50, 5];
const newNumber = numbers.findIndex(function (num) {
  return num > 10; // returns 12
});
// newNumber = 1

Loops​

While Loops​

while (something is true) {
    // do something
}

For Loops​

for (i = 0; i < 2; i++) {
  // do something
}

Audio​

var audio = new Audio("sounds/tom-1.mp3");
audio.play();

Constructor Functions​

Rather than camelCase, constructor function must start with a capital letter. Ex.

function BellBoy(name, age) {
  this.name = name;
  this.age = age;
}

// then use with
var bellboy1 = new BellBoy("Timmy", 19);

Delay function​

setTimeout(); function. Delays execution of a function which is first argument to setTimeout();. The time is in milliseconds.

Further details here.

setTimeout(functionToCall, timeInMs);

Modules​

Useful for separating logic into different files.

math.js
const pi = 3.14159;

function doublePi() {
  return pi * 2;
}

function triplePi() {
  return pi * 3;
}
s;
export default pi;
// imported with [import pi from "./math.js"]
// note that you can name 'pi' here whatever you want

export { doublePi, triplePi };
// imported with [import { doublePi, triplePi } from "./math.js"]
// note that the names need to match here

// can also use [import * as pi from "./math.js"]
// note that this is discouraged in style guides
// this allows you to use pi.default, pi.doublePi(), pi.triplePi()

Advanced Feature to Learn​

  • Callback Functions
  • Promises
  • async/await
  • Generator Functions
  • ES6 features
  • Object Oriented Programming in JS / Classes
  • "this" keyword
  • Closures
  • Regular Expressions